<template>
  <div class="Leftmenu">
    <div class="main" ref="Changesize" v-show="mainshow">
      <div style="display:flex;align-items: center;margin-bottom: 30px;">
        <img src="@/assets/logo.434d10f5.png" alt="">
        <span style="color:#fff;font-size: 20px;font-weight: 600;margin-left: 15px;" v-show="CharactersShow">图书后台</span>
      </div>
      <div @click="getshow(index)" class="list" v-for="(item,index) in list" :key="item.id" :class="index==show?'p':''">
        <el-tooltip :open-delay='200' :disabled="disabled" class="item" effect="dark" :content="item.content" placement="right-start">
          <i class="iconfont " :class="item.icon"></i>
        </el-tooltip>
        <p v-show="CharactersShow">{{item.name}}</p>
      </div>
      <div class="icon" @click="geticonshow()">
        <i class="iconfont icon-zhankai-zuo" v-if="iconshow==true"></i>
        <i class="iconfont icon-zhankai-you" v-else></i>
      </div>
    </div>
  </div>
</template>

<script>
import { demo } from '@/mixins'
import Bus from '@/components/eventBus.js'
export default {
  name: 'Leftmenu',
  data() {
    return {
      disabled: false,
      list: [
        {
          icon: 'icon-tongji',
          name: '首页统计',
          content: '首页统计',
          id: 3983983
        },
        {
          icon: 'icon-fenlei',
          name: '分类管理',
          content: '分类管理',
          id: 3983989
        },
        {
          icon: 'icon-jurassic_user',
          name: '用户管理',
          content: '用户管理',
          id: 3983988
        },
        {
          icon: 'icon-shangpin',
          name: '商品管理',
          content: '商品管理',
          id: 3983987
        },
        {
          icon: 'icon-jinbi',
          name: '订单管理',
          content: '订单管理',
          id: 3983986
        },
        {
          icon: 'icon-pinglun',
          name: '评论管理',
          content: '评论管理',
          id: 39839844
        },
        {
          icon: 'icon-lunbotu_fuzhi',
          name: '轮播管理',
          content: '轮播管理',
          id: 39839344
        }
      ],
      show: 0,
      iconshow: true,
      CharactersShow: true,
      mainshow: true
    }
  },
  mixins: [demo],
  created() {
    // let show = sessionStorage.getItem('show')
    // this.show = show || 0
    //接收各个路由页面传送过来的值，赋值给show，来控制左边的样式更换
    Bus.$on('show', e => {
      this.show = e
    })
  },
  methods: {
    getshow(e) {
      // this.show = e
      // sessionStorage.setItem('show', e)
      //点击对应的页面跳转按钮，跳转到不同路由页面
      if (e == 0) {
        this.$router.push('/home')
      } else if (e == 1) {
        this.$router.push('/classify')
      } else if (e == 2) {
        this.$router.push('/usermanagement')
      } else if (e == 3) {
        this.$router.push('/goods')
      }
    },
    geticonshow() {
      if (this.iconshow) {
        this.iconshow = false
        this.$refs.Changesize.style.width = '60px'
        this.disabled = false
        this.CharactersShow = false
        // if (this.$refs.Changesize.style.width !== '60px') {
        let width2 = 210
        let ch3 = setInterval(() => {
          width2 -= 10
          this.$refs.Changesize.style.width = width2 + 'px'
          if (width2 == 60) {
            clearInterval(ch3)
          }
        }, 20)
        // }
      } else {
        this.iconshow = true
        this.$refs.Changesize.style.width = '210px'
        this.disabled = true
        let width3 = 60
        let ch4 = setInterval(() => {
          width3 += 10
          this.$refs.Changesize.style.width = width3 + 'px'
          if (width3 == 210) {
            clearInterval(ch4)
            this.CharactersShow = true
          }
        }, 20)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@color: rgb(18, 17, 17);
.Leftmenu {
  .main {
    box-sizing: border-box;
    width: 210px;
    height: 100vh;
    background-color: @color;
    padding-left: 10px;
    padding-top: 10px;
    overflow: hidden;
    img {
      width: 90px;
      height: 40px;
    }
    .list {
      height: 45px;
      margin-left: -10px;
      display: flex;
      align-items: center;
      opacity: 0.7;
      i {
        font-size: 16px;
        margin-left: 20px;
        color: #fff;
      }
      p {
        font-size: 15px;
        margin-left: 10px;
        color: #fff;
      }
    }
    .list:hover {
      cursor: pointer;
      opacity: 1;
    }
    .p {
      background-color: blue;
      opacity: 1;
    }
    .icon {
      color: #fff;
      opacity: 0.7;
      position: absolute;
      bottom: 0px;
      padding-bottom: 15px;
      margin-left: -10px;
      padding-left: 10px;
      i {
        font-size: 20px;
      }
    }
    .icon:hover {
      cursor: pointer;
      opacity: 1;
    }
  }
}
</style>